<template>
  <!-- 卡位管理  分享卡位 -->
  <div class="app-container">
    <el-form :model="queryParams" ref="queryForm" :inline="true" class="search-form-new" label-width="80px">
      <el-form-item label="店铺" prop="tenantId" v-hasPermi="['searchTenantID']">
        <el-select v-model="queryParams.tenantId" placeholder="请选择店铺" clearable filterable>
          <el-option v-for="dict in tenantList" :key="dict.tenantId" :label="dict.tenantName" :value="dict.tenantId" />
        </el-select>
      </el-form-item>
      <el-form-item label="手机号" prop="tel">
        <el-input v-model="queryParams.tel" placeholder="请输入手机号" clearable size="small" />
      </el-form-item>
      <el-form-item label="创建时间" prop="timer1">
        <el-date-picker v-model="timer1" type="daterange" range-separator="至" value-format="yyyy-MM-dd" start-placeholder="开始日期" end-placeholder="结束日期">
        </el-date-picker>
      </el-form-item>
      <el-form-item label="到期时间" prop="timer2">
        <el-date-picker v-model="timer2" type="daterange" range-separator="至" value-format="yyyy-MM-dd" start-placeholder="开始日期" end-placeholder="结束日期">
        </el-date-picker>
      </el-form-item>

      <el-form-item class="btns">
        <el-button type="primary" icon="el-icon-search" @click="search">搜索</el-button>
        <el-button type="warning" icon="el-icon-refresh" @click="resetQuery">重置</el-button>
      </el-form-item>
    </el-form>
    <div class="table_box">
      <el-table :data="tableData.records" style="width: 100%" stripe>
        <el-table-column prop="tenantName" label="店铺"></el-table-column>
        <!-- <el-table-column prop="num" label="卡位编号"></el-table-column> -->
        <el-table-column prop="tel" label="手机号">
          <template slot-scope="scope">
            <span v-if="scope.row.telInfos">
              <el-button type="primary" plain @click="openTelInfo(scope.row)">点击查看</el-button>
            </span>
            <span v-if="scope.row.tel">
              {{ scope.row.tel }}
            </span>
          </template>
        </el-table-column>
        <!-- <el-table-column prop="gameCarrierNames" label="游戏运营商"></el-table-column> -->
        <el-table-column prop="pwd" label="游戏账号"></el-table-column>
        <el-table-column prop="num" label="显示数量"></el-table-column>
        <el-table-column prop="createTime" label="创建时间" width="160"></el-table-column>
        <el-table-column prop="expireTime" label="到期时间" width="160"></el-table-column>
        <el-table-column prop="guolv" label="过滤短信" show-overflow-tooltip></el-table-column>
        <el-table-column prop="remark" label="备注" show-overflow-tooltip></el-table-column>
        <el-table-column prop="remark" label="状态" width="100">
          <template slot-scope="scope">
            <el-tag :type="getState(scope.row.expireTime).type">{{getState(scope.row.expireTime).label}}</el-tag>
          </template>
        </el-table-column>

        <el-table-column fixed="right" label="操作" width="200">
          <template slot-scope="scope">
            <el-button type="add" @click="viewLink(scope.row)" v-if="getState(scope.row.expireTime).label=='正常'">查看链接</el-button>
            <!-- <el-button type="add" @click="editRow(scope.row)" v-if="getState(scope.row.expireTime).label=='正常'">修改</el-button> -->
            <el-button type="del" @click="delRow(scope.row)" v-if="getState(scope.row.expireTime).label=='正常'">立即失效</el-button>
          </template>
        </el-table-column>
      </el-table>
      <pagination v-show="tableData.total > 0" :total="tableData.total" :page.sync="queryParams.pageNum" :limit.sync="queryParams.pageSize" @pagination="getList" />

    </div>

    <addDialog ref="addDialog"></addDialog>

    <!-- 短信分享链接 -->
    <el-dialog title="短信分享链接" :visible.sync="qrCodeShow" width="620px">

      <div ref="qrcode" style="width:200px; height:200px;margin:0 auto;margin-bottom:15px"></div>
      <div class="link-box">
        <div style="text-align:center">
          <span style="margin-right:15px;color: #409eff;"> <a :href="code_link" target="_blank">{{code_link}}</a></span><br/>
          <el-button style="margin-top: 5px;" size="mini" @click="copy(code_link)">复制链接</el-button>
        </div>
      </div>
    </el-dialog>
    <!-- 查看手机号 -->
    <el-dialog title="分享详情" :visible.sync="showTelInfo" width="620px">
      <div style="min-height: 300px;">
        <el-table :data="telList" border stripe>
          <!-- <el-table-column prop="chuzufangName" label="管理方">
            <template slot-scope="scope">
              <span>{{ scope.row.chuzufangName||scope.row.custodian }}</span>
            </template>
          </el-table-column> -->
          <el-table-column prop="tel" label="手机号" width="130"></el-table-column>
          <el-table-column prop="gameStr" label="游戏运营商">
            <template slot-scope="scope">
              <span>{{ scope.row.gameCarrierNames }}</span>
            </template>
          </el-table-column>
          <!-- <el-table-column prop="remark" label="设备状态" width="100">
            <template slot-scope="scope">
              <el-tag v-if="scope.row.deviceStatus==1" type="success">在线</el-tag>
              <el-tag v-if="scope.row.deviceStatus==2" type="danger">离线</el-tag>
            </template>
          </el-table-column> -->
        </el-table>
      </div>

    </el-dialog>
  </div>
</template>

<script>
import addDialog from "../components/addFenxiang";
import phoneApi from "@/api/phoneManage";
import { getToken } from "@/utils/auth";
import QRCode from "qrcodejs2";
export default {
  name: "",
  components: { addDialog },
  data() {
    return {
      qrCodeShow: false,
      code_link: "",
      qrcode: null,
      timer1: [],
      timer2: [],
      tableData: {
        records: [],
        total: 0,
      },
      loading: false,
      queryParams: {
        pageNum: 1,
        pageSize: 10,
        tel: "",
      },
      telList: [],
      showTelInfo: false,
      curRow: {},
    };
  },
  created() {
    // this.getGames();
    // this.getHost();
    this.getList();
  },
  activated() {},
  computed: {
    tenantList() {
      return this.$store.getters.tenantList;
    },
    getState() {
      let now = new Date();
      return (expireTime) => {
        let expire = new Date(expireTime);
        if (now.getTime() < expire.getTime()) {
          return {
            label: "正常",
            type: "success",
          };
        } else {
          return {
            label: "已失效",
            type: "danger",
          };
        }
      };
    },
    shopInfo() {
      return this.$store.getters.shopInfo;
    },
    retailDomain() {
      return this.$store.getters.retailDomain;
    },
  },
  methods: {
    // 获取列表
    getList() {
      this.loading = true;
      if (this.timer1 && this.timer1.length == 2) {
        this.queryParams.createTimeStart = this.timer1[0];
        this.queryParams.createTimeEnd = this.timer1[1];
      }
      if (this.timer2 && this.timer2.length == 2) {
        this.queryParams.expireTimeStart = this.timer2[0];
        this.queryParams.expireTimeEnd = this.timer2[1];
      }
      phoneApi.getAppMessageShareList(this.queryParams).then((response) => {
        this.tableData.records = response.rows;
        this.tableData.total = response.total;
        this.loading = false;
        if (response.rows && response.rows.length) {
          this.rise = response.rows[0].rise;
        }
      });
    },
    // 打开详情
    openTelInfo(row) {
      this.curRow = { ...row };
      this.telList = JSON.parse(this.curRow.telInfos);
      this.showTelInfo = true;
    },
    // 搜索
    search() {
      this.queryParams.pageNum = 1;
      this.queryParams.pageSize = 10;
      this.getList();
    },
    // 打开修改弹窗
    editRow(row) {
      this.$refs.addDialog.open(row, "edit");
    },
    copy(txt) {
      this.$copyText(txt).then((res) => {
        this.$message.success("已复制到剪切板");
      });
    },
    // 查看链接
    viewLink(row) {
      let host = "";
      if (this.shopInfo.otherDomain) {
        if (
          this.shopInfo.otherDomain &&
          this.shopInfo.otherDomain.includes(",")
        ) {
          host = "http://" + this.shopInfo.otherDomain.split(",")[0] + "/";
        } else {
          host = "http://" + this.shopInfo.otherDomain + "/";
        }
      } else {
        host = this.retailDomain["h5"].dictValue;
      }

      this.code_link = `${host}pages/SMSList/SMSList/?flag=${row.randomStr}`;
      // this.copy(this.code_link)
      this.qrCodeShow = true;
      this.$nextTick(() => {
        if (this.qrcode != null) {
          this.qrcode.clear(); // 清除代码
        } else {
          this.qrcode = new QRCode(this.$refs.qrcode, {
            width: 200,
            height: 200,
            correctLevel: QRCode.CorrectLevel.L,
          });
          //生成二维码
          this.qrcode.makeCode(this.code_link);
        }
      });
    },
    // 删除
    delRow(row) {
      this.$confirm("此操作将该记录改为失效, 是否继续?", "提示", {
        confirmButtonText: "确定",
        cancelButtonText: "取消",
        type: "warning",
      })
        .then(() => {
          phoneApi
            .appMessageShareEdit({
              id: row.id,
              expireTime: this.parseTime(new Date()),
            })
            .then((res) => {
              this.$message({
                type: "success",
                message: "操作成功!",
              });
              this.getList();
            });
        })
        .catch((err) => {});
    },

    //重置
    resetQuery() {
      this.timer1 = [];
      this.timer2 = [];
      this.queryParams = {
        pageNum: 1,
        pageSize: 10,
      };
      this.getList();
    },
  },
};
</script>
<style lang="scss" scoped>
</style>